<template>
 <div>
    <el-input placeholder="请输入条款内容" type="text" v-model="search.textcontent" v-if="jurisdiction.searchMaaiProByCondition" auto-complete="off" class="width220 searchBtn">
      <el-button slot="append" icon="el-icon-search" class="themeBtn" @click="handleSearch"></el-button>
    </el-input>
    <el-button class="slot-btn-top" v-if="jurisdiction.insertMaaiProduction" type="primary" size="small" @click="isShowDailog('insertContent')">新增</el-button>
    <el-table :data="tableData" stripe border :height="tableHeight"  style="width: 100%;"  v-loading="loading">
      <el-table-column fixed type="index" label="*" sortable align="center" width="40">
      </el-table-column>
      <el-table-column prop="nums" label="条款编号" sortable width="150">
      </el-table-column>
      <el-table-column prop="textcontent" label="条款内容" sortable width="1080">
        <template slot-scope="scope">
          <div v-html="scope.row.textcontent"></div>
        </template>
      </el-table-column>
      <el-table-column prop="inputperson" label="填写人" sortable width="100">
      </el-table-column>
      <el-table-column prop="inputtime" label="填写时间" sortable width="200" :formatter="formatTimestampToTime">
      </el-table-column>
      <el-table-column fixed="right" label="操作" sortable align="right" width="90">
        <template slot-scope="scope">
          <el-button @click="isShowDailog('updateContent',scope.row)" type="text" size="small">编辑</el-button>
          <el-button v-if="jurisdiction.delMaaiProduction" @click="isShowDailog('deleteContent',scope.row)" type="text" size="small"><span class="sub-fn-color3">删除</span></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
    <el-dialog :title="dialog.title" :visible.sync="dialog.isShow"  :close-on-click-modal="false" v-dialogDrag class="bodyNopaddingTop">
      <el-tabs v-model="dialog.activeName" @tab-click="handleClick">
        <el-tab-pane name="1" label="条款详情">
          <el-form label-position="right" label-width="80px" line :model="dialog.formData">
            <el-form-item label="条款编号">
              <el-input v-model="dialog.formData.nums" clearable></el-input>
            </el-form-item>
            <el-form-item label="填写人" v-if="dialog.type!=='insertContent'">
              <el-input v-model="dialog.formData.inputperson" disabled ></el-input>
            </el-form-item>
            <el-form-item label="填写时间" v-if="dialog.type!=='insertContent'">
              <el-input v-model="dialog.formData.inputtime" disabled></el-input>
            </el-form-item>
            <el-form-item label="条款内容">
              <quill-editor v-model="dialog.formData.textcontent"></quill-editor>
            </el-form-item>
            <el-form-item >
              <el-button type="primary" v-if="jurisdiction.updateMaaiProduction" @click="submitDialog">确 定</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane name="2" label="附件上传" v-if="dialog.type!=='insert'">
          <div v-loading="dialog.enclosure.loading">
            <el-form label-position="right" label-width="110px" :model="dialog.enclosure.formData">
              <el-form-item label="选择附件">
                <el-upload class="upload-demo"
                  ref="uploadEnclosure"
                  action="string"
                  :auto-upload="false" 
                  :limit="1" 
                  :http-request="uploadSectionFile">
                  <el-button slot="trigger" size="small" type="primary">上传附件</el-button>
                </el-upload>
              </el-form-item >
              <el-form-item label="文件描述">
                <el-input v-model="dialog.enclosure.formData.fileDesc" type="textarea"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button @click="submitEnclosure" type="primary">提交</el-button>
              </el-form-item>
            </el-form>
          </div>
          <!-- 附件列表 -->
          <h3 class="dialog-plate-title"><span>已上传附件列表</span></h3>
          <el-table :data="dialog.enclosure.enclosureList" stripe border class="user-table">
            <el-table-column fixed type="index" label="*" sortable min-width="40"></el-table-column>
            <el-table-column prop="fileName" label="文件名称" sortable min-width="300"></el-table-column>
            <el-table-column prop="uploadPersonName" label="文件上传人" sortable min-width="130"></el-table-column>
            <el-table-column prop="uploadTime" label="文件上传时间" sortable min-width="170"></el-table-column>
            <el-table-column prop="fileDesc" label="文件描述" sortable min-width="400"></el-table-column>
            <el-table-column fixed="right" label="操作" sortable align="right" min-width="90">
              <template slot-scope="scope">
                <el-button v-if="jurisdiction.updateMaaiProduction"  @click="downloadAppendix(scope.row)" type="text" size="small">下载</el-button>
                <el-button @click="deleteAppendix(scope.row)" type="text" size="small"><span class="sub-fn-color3">删除</span></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      
    </el-dialog>
  </div>
</template>
<script>
import fieldGuidanceApi from 'plugins/axios/fieldGuidanceApi.js'
import baseApi from 'plugins/axios/baseApi.js'
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import {quillEditor} from 'vue-quill-editor';
import {mapState} from 'vuex'
export default {
  components:{
    quillEditor
  },
  data(){
    return {
      orgId:'',/**法规文件orgId*/
      dataList:[],
      loading:false,
      pagination:{/**分页参数 */
        currentPage:1,
        pageSize:10,
        total:0
      },
      search:{
        textcontent:''
      },
      jurisdiction:{
        contentPrint: false,
        delMaaiProduction: false,
        insertMaaiProduction: false,
        queryMaaiProduction: false,
        searchMaaiProByCondition: false,
        updateMaaiProduction: false,
      },
      dialog:{
        activeName:'1',
        isShow:false,
        title:'',
        type:'',
        formData:{},
        enclosure:{/**附件 */
          loading:false,
          formData:{},
          enclosureList:[]
        }
      }
    }
  },
  watch: {
    $route(){
      this.orgId = this.$route.query.orgId;
      this.pagination.currentPage=1;
      this.getFileList();
      this.getMenuJurisdiction();
    }
  },
  computed:{
    ...mapState({clientHeight:state=>state.common.clientHeight}),
    tableHeight(){
      return this.clientHeight-184;
    },
    tableData(){
      return this.dataList.slice((this.pagination.currentPage-1)*this.pagination.pageSize,this.pagination.currentPage*this.pagination.pageSize)
    }
  },
  created(){
    
  },
  mounted(){
    this.orgId = this.$route.query.orgId;
    this.getFileList();
    this.getMenuJurisdiction();
  },
  methods:{
    /**获取文件列表 */
    getFileList(){
      let self = this;
      self.loading= true;
      let getData = {
        nums:self.search.textcontent
      }
      fieldGuidanceApi.getFieldGuidanceList(self.orgId,getData).then(res=>{
        self.loading= false;
        self.dataList = res.content;
        self.pagination.total = res.content.length;
      },error=>{
        self.loading= false;
      })
    },
    handleSearch(){
      this.pagination.currentPage = 1;
      this.getFileList();
    },
    /**获取当前菜单当前用户的菜单权限 */
    getMenuJurisdiction(){
      let self = this;
      baseApi.getMenuJurisdiction(164).then(res=>{
        res.content.forEach(item=>{
          self.jurisdiction[item.component] = item.menuShow
        })
      })
    },
    handleSizeChange(size){
      this.pagination.pageSize = size;
    },
    handleCurrentChange(current){
      this.pagination.currentPage = current;
    },
    isShowDailog(type,row){
      let self = this;
      self.dialog.type = type;
      switch(type){
        case 'insertContent':
          self.dialog.isShow = true;
           self.dialog.title ="新增法规文件条款";
          self.dialog.formData = {};
        break;
        case 'updateContent':
          self .dialog.isShow = true;
          self.dialog.title ="编辑法规文件条款";
          self.dialog.formData = JSON.parse(JSON.stringify(row));
        break;
        case 'deleteContent':
          this.$confirm('是否删除该法规文件条款?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
         fieldGuidanceApi.deleteFieldGuidance(self.orgId,{id:row.id}).then(res=>{
           self.$message.success('删除成功！');
           self.getFileList();
         })
        }).catch(() => {});
        break;
      }
    },
    submitDialog(){
      let self  = this;
      let postData = JSON.parse(JSON.stringify(self.dialog.formData))
      fieldGuidanceApi.insertUpdateFieldGuidance(self.orgId,self.dialog.type,postData)
      .then(res=>{
        self.dialog.isShow = false;
        self.$message.success(`${self.dialog.title}成功`);
        self.getFileList();
      })
    },
    formatTimestampToTime(row, column, cellValue, index){
      return this.timestampToTime(cellValue);
    },
    /**编辑弹框切换 */
    handleClick(tab,event){
      switch(tab.name){
        case '1':
          break;
        case '2':
          this.getEnclosureData()
          break;
      }
    },
   /**获取文件附件列表 */
    getEnclosureData(){
      let self  = this;
      fieldGuidanceApi.getEnclosureList(self.dialog.formData.id).then(res=>{
        self.dialog.enclosure.enclosureList= res.content;
      })
    },
     /**附件提交上传*/
    uploadSectionFile(param){
      let self =this;
      self.dialog.enclosure.loading = true;
      let fileObj = param.file;
      let form =new FormData();
      let postData={
        fileId:self.dialog.formData.id,
        fileDesc:self.dialog.enclosure.formData.fileDesc
      };
      form.append('maaiProductionAttachment',JSON.stringify(postData));
      form.append('file',fileObj);
      fieldGuidanceApi.enclosureUpload(form).then(res=>{
        self.dialog.enclosure.loading  = false;
        self.$message.success(`附件新增成功`);
        self.dialog.enclosure.formData={};
        self.$refs.uploadEnclosure.clearFiles();
        self.getEnclosureData();
      },error=>{
        self.dialog.enclosure.loading  = false;
      })
    },
    /**点击附件提交*/ 
    submitEnclosure(){
      let self = this;
      if(self.$refs.uploadEnclosure.uploadFiles.length>0){
        self.$refs.uploadEnclosure.submit()
      }else{
         self.$message.error(`请选择需要上传的附件！`)
      }
    },
    downloadAppendix(row){
      window.location.href = fieldGuidanceApi.downloadEnclosure(row.id);
    },
     /**点击删除附件 */
    deleteAppendix(row){
      let self = this;
      self.$confirm('是否删除此附件?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        fieldGuidanceApi.deleteEnclosure(row.id).then(res=>{
          self.$message.success("删除成功！");
          self.getEnclosureData();
        })
      }).catch(() => {});
    },
  }
}
</script>
<style lang="stylus" scoped>

</style>